<template>
<div v-show="title !=''">
    <div class="base-template__content">
        <div  class="moon__title">{{title}}</div>
        <div  class="moon__img"></div>
        <div  class="moon__descriptionList" v-for="(item ,item_index) in sprops.descriptions" :key="item_index">
            {{item}}
        </div>
    </div>
    <div  class="table-parameter" v-show="sprops.url">
        <div  class="line-dotted"></div>
        <div   class="new-content-title-wrapper">
            <div  class="new-content-title">服务请求方式</div>
            <div  class="new-content-line" style="width: 94px;"></div>
        </div>
        <table  class="table-custom">
            <tbody >
                <tr >
                    <td >资源路径</td>
                    <td style="user-select: text;">{{sprops.url}}</td>
                </tr>
                <tr >
                    <td >请求方式</td>
                    <td >{{sprops.method}}</td>
                </tr>
                <tr >
                    <td >权限</td>
                    <td >{{sprops.session}}</td>
                </tr>
                <tr >
                    <td >跨域情况</td>
                    <td >{{sprops.cors}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div  class="table-parameter">
        <div  class="line-dotted"></div>
        <div   class="new-content-title-wrapper">
            <div  class="new-content-title">服务请求参数</div>
            <div  class="new-content-line"  style="width: 94px;"></div>
        </div>
        <table  class="table-custom">
            <thead >
                <tr >
                    <th >参数</th>
                    <th style="width: 45px;">默认值</th>
                    <th >说明</th>
                </tr>
            </thead>
            <tbody >
                <tr v-for="(item ,item_index) in sprops.request" :key="item_index">
                    <td >{{item.name}}</td>
                    <td >{{item.default}}</td>
                    <td >{{item.description}}</td>
                </tr>
            </tbody>
        </table>
        <div  class="line-dotted"></div>
        <p>代码示例</p>
        <pre>
            <code class="language-javascript">{{sprops.requestcodes}}</code>
        </pre>
    </div>
    <div  class="table-parameter">
        <div  class="line-dotted"></div>
        <div   class="new-content-title-wrapper">
            <div  class="new-content-title">返回内容</div>
            <div  class="new-content-line"  style="width: 64px;"></div>
        </div>
        <table  class="table-custom">
            <thead >
                <tr >
                    <th >返回值</th>
                    <th >说明</th>
                </tr>
            </thead>
            <tbody >
                <tr v-for="(item ,item_index) in sprops.back" :key="item_index">
                    <td >{{item.name}}</td>
                    <td >{{item.description}}</td>
                </tr>
            </tbody>
        </table>
        <div  class="line-dotted"></div>
        <p>代码示例</p>
        <pre>
            <code class="language-javascript">{{sprops.backcodes}}</code>
        </pre>
    </div>
</div>

</template>
<script>
import Bus from '../../src/bus.js';
  export default {
    data() {
      return {
        title:'',
        sprops:{},
      }
    },
    mounted() {
        Bus.$off('show_services_prop').$on('show_services_prop', (props,title) => {
            this.sprops=props
            this.title=title
        })
    },
  }
</script>
<style>
.table-parameter pre {
    font-family: Consolas,Monaco,Andale Mono,monospace;
    line-height: 1.7em;
    overflow: auto;
    padding: 6px 10px;
    border-left: 5px solid #6ce26c;
    background-color: #f7f7f7;
    color: inherit;
    margin: 0;
    outline: none;
}
.table-parameter pre>code {
    font-family: Consolas,Monaco,Andale Mono,monospace;
    border: 0;
    display: inline;
    max-width: none;
    padding: 0;
    margin: 0;
    overflow: initial;
    line-height: 1.6em;
    font-size: .95em;
    white-space: pre;
    background: 0 0;
    color: #666555;
    outline: none;
}
</style>